﻿@{
    Layout = null;
}

<link href="~/libs/layui-v2.9.21/layui-v2.9.21/layui/css/layui.css" rel="stylesheet" />

<form class="layui-form layui-row layui-col-space16">
    <div class="layui-row">
        <div class="layui-col-xs3">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-cellphone"></i>
                </div>
                <input type="text" name="code" placeholder="库位编号" lay-affix="clear" class="layui-input">
            </div>
        </div>
        <div class="layui-col-xs3">
            <div class="layui-input-wrap">
                <select name="isDisabled">
                    <option value="0">请选择</option>
                    <option value="1">空闲</option>
                    <option value="2">未满</option>
                    <option value="3">已满</option>
                    <option value="4">损坏</option>
                    <option value="5">维护</option>
                </select>
            </div>
        </div>
        <div class="layui-col-xs5">
            <div style="margin-left: 11px;">
                <button class="layui-btn" lay-submit lay-filter="sub">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">清空</button>
            </div>
        </div>
    </div>
</form>
<table class="layui-hide" id="list"></table>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.9.21/dist/layui.js"></script>
<script>
    layui.use(function(){
      var table = layui.table;
      var form = layui.form;
      // 创建表格实例
      table.render({
        elem: '#list',
        url: '/StorageLocation/GetPageStorage', // 此处为静态模拟数据，实际使用时需换成真实接口
        cols: [[
          {field:'id', title: 'ID', width:80, sort: true, fixed: true},
              {field: 'warehouse', title: '仓库名称', width: 100},
              {field: 'locationAttribute', title: '储位属性', width: 100},
              {field: 'productAttribute', title: '产品属性', width: 100},
              {field: 'locationCode', title: '库位编码', width: 100},
              {field: 'customer', title: '所属客户', width: 100},
              {field: 'shelvingSequence', title: '上架序列', width: 100},
              {field: 'length', title: '长度', width: 100},
              {field: 'width', title: '宽度', width: 100},
              {field: 'height', title: '高度', width: 100},
              {field: 'maxPallet', title: '最大托盘', width: 100},
              {field: 'locationType', title: '库位类型', width: 100},
              {field: 'isDisabled', title: '库位状态', width: 100 ,templet: function(d){
                switch(d.isDisabled) { // 确保此处是获取该字段的正确值  
                    case 1: return '空闲'; // 使用 return 返回值  
                    case 2: return '未满';  
                    case 3: return '已满';  
                    case 4: return '损坏';  
                    case 5: return '维护';  
                    default: return '未知'; // 可以加上默认情况以防未匹配  
                }  
              }}
            ]],
        page: true,
        limit:10,
        limits:[10,20,30],
        height: 310
      });
      // 搜索提交
      form.on('submit(sub)', function(data){
        var field = data.field; // 获得表单字段
        // 执行搜索重载
        table.reload('list', {
          page: {
            curr: 1 // 重新从第 1 页开始
          },
          where: field, // 搜索的字段
        });
        return false; // 阻止默认 form 跳转
      });
    });
</script>
